<template>
  <el-container style="height: 100vh;">
    <!-- 侧边栏 -->
    <el-aside width="240px" style="background-color: #304156;">
      <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          background-color="#304156"
          text-color="#fff"
          active-text-color="#ffd04b"
      >
        <el-menu-item index="1">
          <img src="../assets/logo1.png" style="width: 240px;height: 60px">
        </el-menu-item>
        <el-menu-item index="2">
          <i class="el-icon-document"></i>
          <router-link to="/student">学生管理</router-link>
        </el-menu-item>
        <el-menu-item index="3">
          <i class="el-icon-setting"></i>
          <span>教师管理</span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-user"></i>
          <span>课程管理</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <el-container>
      <!-- 顶部导航栏 -->
      <el-header style="background-color: #409EFF; color: #fff; line-height: 60px;">
        <span>学校后台管理系统</span>
        <el-dropdown style="float: right;">
          <div>
            <img :src="user.icon" style="width: 50px;height: 50px;border-radius: 50%">
            <span class="el-dropdown-link">
              {{ user.nickname }}
            </span>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
                <router-link to="/updateUser" style="color:#000">个人中心</router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link to="/" style="color:#000">退出登录</router-link>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>
      <!-- 主要内容区域 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import {mapGetters} from "vuex";

export default {
  name: "IndexView",
  // data(){
  //   return {
  //     user: {}
  //   }
  // },
  computed:{
    ...mapGetters(["getUser"]),
    user(){
      return this.getUser;
    }
  },
  // mounted() {
  //   //页面挂载后，读取用户信息，转换为对象
  //   this.user = JSON.parse(localStorage.getItem('user'))
  // }
}
</script>

<style>
.el-header {
  background-color: #409EFF;
  color: #fff;
  line-height: 60px;
}

.el-aside {
  color: #fff;
}

a{
  text-decoration: none;
  color: #fff;
}
</style>